﻿@model BeYourMarket.Web.Models.MetaFieldModel

@{
    ViewBag.Title = "[[[Custom Field]]]";
}

@section Styles {
    <link href="~/css/tagsinput/jquery.tagsinput.css" rel="stylesheet" />
    <link href="~/css/select2/select2.css" rel="stylesheet" />
}

<div class="wraper container-fluid">

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading"><h3 class="panel-title">[[[Custom Field]]]</h3></div>
                <div class="panel-body">
                    <form action="@Url.Action("CustomFieldUpdate", "Listing")" id="settingsForm" method="post" class="form-horizontal" role="form">

                        @Html.HiddenFor(x => x.MetaField.ID)

                        @Html.ValidationSummary(true, string.Empty, new { @class = "alert alert-danger" })

                        <div class="form-group">
                            <label class="col-sm-2 control-label">ID</label>
                            <div class="col-sm-10">
                                <p class="form-control-static">@Model.MetaField.ID</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">[[[Type]]]</label>
                            <div class="col-md-10">
                                @Html.DropDownListFor(m => m.MetaField.ControlTypeID, EnumHelper.GetSelectList(typeof(BeYourMarket.Model.Enum.Enum_MetaFieldControlType)), new { @class = "form-control", required = "" })
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">[[[Name]]]</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="MetaField_Name" name="MetaField.Name" value="@Model.MetaField.Name" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">[[[Options]]]</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control tags" id="MetaField_Options" name="MetaField.Options" value="@Model.MetaField.Options" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <label class="cr-styled">
                                    <input checked="@Model.MetaField.Required" id="MetaField_Required" name="MetaField.Required" type="checkbox" value="true" />
                                    <i class="fa"></i>
                                    [[[Required]]]
                                </label>
                                <input name="Required" type="hidden" value="false" />
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <label class="cr-styled">
                                    <input checked="@Model.MetaField.Searchable" id="MetaField_Searchable" name="MetaField.Searchable" type="checkbox" value="true" />
                                    <i class="fa"></i>
                                    <input name="Searchable" type="hidden" value="false" />
                                    [[[Searchable]]]
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">[[[Category]]]</label>
                            <div class="col-md-10">
                                <select name="Categories" id="Categories" class="select2" multiple data-placeholder="[[[Choose Category...]]]" required>
                                    @foreach (var category in Model.Categories)
                                    {
                                        <option value="@category.ID" selected="@Model.MetaField.MetaCategories.Any(x=>x.CategoryID == category.ID)">@category.Name</option>
                                    }
                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button class="btn btn-primary" type="submit"><i class="fa fa-save"></i> [[[Save]]]</button>
                                <a href="@Url.Action("CustomFields", "Listing")" class="btn btn-default"><i class="fa fa-remove"></i> [[[Cancel]]]</a>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/css/tagsinput/jquery.tagsinput.min.js"></script>
    <script src="~/css/select2/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            // Tags Input
            $('.tags').tagsInput({
                width: 'auto',
                defaultText: '[[[add an option]]]',
                removeWithBackspace: true,
                minInputWidth: '100px'
            });

            // Select2
            $(".select2").select2({
                width: '100%'
            });
        });

    </script>
}

